<html xmlns="http://www.w3.org/1999/xhtml">
<head>  
<script type="text/javascript" src="<?php echo str_replace("/index.php", "", base_url());?>assets/assets_uploads/js/jquery.form.js"></script>
<link href="<?php echo str_replace("/index.php", "", base_url());?>assets/assets_uploads/css/style.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript"> 
$(document).ready(function() { 
//elements aa
var progressbox 		= $('#progressbox'); //progress bar wrapper
var progressbar 		= $('#progressbar'); //progress bar element
var statustxt 			= $('#statustxt'); //status text element
var submitbutton 		= $("#SubmitButton"); //submit button
var myform 				= $("#UploadForm"); //upload form
var output 				= $("#output"); //ajax result output element
var completed 			= '0%'; //initial progressbar value
var FileInputsHolder 	= $('#AddFileInputBox'); //Element where additional file inputs are appended
var MaxFileInputs		= 3; //Maximum number of file input boxs

// adding and removing file input box
var i = $("#AddFileInputBox div").size() + 1;
$("#AddMoreFileBox").click(function () {
		event.returnValue = false;
		if(i < MaxFileInputs)
		{
			$('<span><input type="file" id="fileInputBox" size="20" name="file[]" class="addedInput" value=""/><a href="#" class="removeclass small2"><img src="<?php echo str_replace("/index.php", "", base_url());?>assets/assets_uploads/images/close_icon.gif" border="0" /></a></span>').appendTo(FileInputsHolder);
			i++;
		}
		return false;
});

$("body").on("click",".removeclass", function(e){
		event.returnValue = false;
		if( i > 1 ) {
				$(this).parents('span').remove();i--;
		}
		
}); 

$("#ShowForm").click(function () {
  $("#uploaderform").slideToggle(); //Slide Toggle upload form on click
});
	
$(myform).ajaxForm({
	beforeSend: function() { //brfore sending form
		submitbutton.attr('disabled', ''); // disable upload button
		statustxt.empty();
		progressbox.show(); //show progressbar
		progressbar.width(completed); //initial value 0% of progressbar
		statustxt.html(completed); //set status text
		statustxt.css('color','#000'); //initial color of status text
		
	},
	uploadProgress: function(event, position, total, percentComplete) { //on progress
		progressbar.width(percentComplete + '%') //update progressbar percent complete
		statustxt.html(percentComplete + '%'); //update status text
		if(percentComplete>50)
			{
				statustxt.css('color','#fff'); //change status text to white after 50%
			}else{
				statustxt.css('color','#000');
			}
			
		},
	complete: function(response) { // on complete
		output.html(response.responseText); //update element with received data
		myform.resetForm();  // reset form
		submitbutton.removeAttr('disabled'); //enable submit button
		progressbox.hide(); // hide progressbar
		$("#uploaderform").slideUp(); // hide form after upload
	}
});

}); 
</script> 

  <script type="text/javascript">
		// Setup Form
		$('#form_master').setupForm([
			//{ name: 'id_event', type: 'text', size: 'medium', maxlength: 20, noempty:true },
			{ name: 'no_event', type: 'text', size: 'medium', maxlength: 20, noempty:true },
			{ name: 'jenis_event', type: 'text', size: 'medium', maxlength: 20, noempty:true },
			{ name: 'no_surat', type: 'lov', size: 'long',
				onClearButton:function(){
					$(this).setval(''); 
					$('#no_surat').setval(''); 
					$('#nama_kegiatan').setval('');
					$('#tanggal_mulai_kegiatan').setval('');
					$('#tanggal_selesai_kegiatan').setval('');
					$('#jam_kegiatan').setval('');
				},
				onActionButton:function(){ 
					LOVNoSurat({ onSelect:function(row){ 
						$('#no_surat').setval(row.no_surat); 
						$('#nama_kegiatan').setval(row.nama_kegiatan); 
						$('#tanggal_mulai_kegiatan').setval(row.tanggal_mulai_kegiatan);
						$('#tanggal_selesai_kegiatan').setval(row.tanggal_selesai_kegiatan); 
						$('#jam_kegiatan').setval(row.pukul); 
					} }); 
				}
			},
			{ name: 'nama_kegiatan', type: 'text', size: 'long', maxlength: 200, noempty:true },
			{ name: 'tanggal_mulai_kegiatan', type: 'date', size: 'long', maxlength: 200, noempty:true },
			{ name: 'tanggal_selesai_kegiatan', type: 'date', size: 'long', maxlength: 200, noempty:true },
			{ name: 'jam_kegiatan', type: 'text', size: 'short', maxlength: 20, noempty:true },
			{ name: 'izin_kepolisian', type: 'text', size: 'medium', maxlength: 30, noempty:true },
			{ name: 'keterangan', type: 'text', size: 'long', maxlength: 255 },
		]);	

  			<?php 
				if (isset($data)){
					?>
						$('#id_event').setval("<?php echo $data['id_event']; ?>");
						$('#no_event').setval("<?php echo $data['no_event']; ?>");
		  				$('#no_event_img').setval("<?php echo $data['no_event']; ?>");
						$('#no_surat').setval("<?php echo $data['no_surat']; ?>");
						$('#nama_kegiatan').setval("<?php echo $data['nama_event']; ?>");
						$('#jam_kegiatan').setval("<?php echo $data['jam_kegiatan']; ?>");
						$('#keterangan').setval("<?php echo $data['keterangan']; ?>");						
						$('#jenis_event').setval("<?php echo $data['jenis_event']; ?>");
						$('#izin_kepolisian').setval("<?php echo $data['izin_kepolisian']; ?>");

						$('#tanggal_mulai_kegiatan').setval("<?php echo $data['tanggal_mulai_kegiatan']; ?>");
						$('#tanggal_selesai_kegiatan').setval("<?php echo $data['tanggal_selesai_kegiatan']; ?>");
					<?php
				} 
			?>

		  <?php if (isset($no_event)) {
		  	?>
		  	var no_event = "<?php echo $no_event; ?>";
		  	var id_event_auto = '<?php echo $id_event_auto; ?>' ;
		  	$('#id_event').setval(id_event_auto);
		  	$('#no_event').setval(no_event);
		  	$('#no_event_img').setval(no_event);
		  	<?php
		  }
		  ?>
		

		// Set Action Button
		var buttons = [ { label: 'Save', icon: 'add', onclick: function() {
							$('#uploaderform').remove();
							$('#form_master').submitForm(	'/'+controller+'/ajax_post', 
								{
									onComplete : function(data){loadPage('/'+controller+'/Index');
								}
							} 
							);
						} },
						{ label: 'Batal', icon: 'cancel', onclick: function() {
							loadPage('/'+controller+'/index');	
						} }];
		setAction(buttons);

		function formMasterSubmit(){
			$('#form_master').submitForm(	'/'+controller+'/ajax_post/1', 
				{
					onComplete : function(data){loadPage('/'+controller+'/index'); ///+document.getElementById('no_event_img').value
				}
			} 
		);
		}
//--><!]]></script>
</head>
<body>

	<form id="form_master">
    <table class="tb_form" style="width:100%;" cellpadding="0" cellspacing="0">
    <tr>
        <td class="label" style="width:150px">No Event</td>
        <td><input id="id_event" name="id_event" type="hidden" /></td>
    </tr>
    <tr>
        <td class="label" style="width:150px">No Event</td>
        <td><input id="no_event" /></td>
    </tr>
    <tr>
        <td class="label">No Surat</td>
        <td><input id="no_surat" name="no_surat"></td>
    </tr>
    <tr>
        <td class="label" style="width:150px">Nama Kegiatan</td>
        <td><input id="nama_kegiatan" /></td>
    </tr>
  	<tr>
        <td class="label" style="width:150px">Tanggal Mulai Kegiatan</td>
        <td><input id="tanggal_mulai_kegiatan" /></td>
    </tr>
    <tr>
        <td class="label" style="width:150px">Tanggal Selesai Kegiatan</td>
        <td><input id="tanggal_selesai_kegiatan" /></td>
    </tr>
    <tr>	
        <td class="label" style="width:150px">Jam Kegiatan</td>
        <td><input id="jam_kegiatan" /></td>
    </tr>
    <tr>
        <td class="label" style="width:150px">Jenis Event</td>
        <td>
        	<select id="jenis_event" name="jenis_event">
				<option value="Rutin_Bulanan" >Rutin Bulanan</option>
				<option value="Rutin_Tahunan" >Rutin Tahunan</option>
				<option value="Tidak_Rutin" >Tidak Rutin</option>
			</select>
        </td>
    </tr>
    <tr>
        <td class="label" style="width:150px">Izin Kepolisian</td>
        <td><select id="izin_kepolisian" name="izin_kepolisian">
        		<option value="Belum Dapat Izin" >Sudah diserahkan</option>
				<option value="Sudah Dapat Izin" >Belum diserahkan</option>
			</select></td>
    </tr>
    <tr>
        <td class="label" style="width:150px">Keterangan</td>
        <td><textarea rows="5" name="keterangan" id="keterangan" /></td>
    </tr>
    </table>
    </form>   


		<div id="uploadResults">
			<div align="center" style="margin:20px;"><a href="#" id="ShowForm">Buka / Tutup Form Gallery Foto</a></div>
		    <div id="output"></div>
		</div> 
		<div id="uploaderform">
		<fieldset>
		<legend><font color="red"><b>&nbsp;* Di isi jika ada foto..&nbsp;</b></font></legend>
		<form action="<?php echo str_replace("/index.php", "", base_url());?>pro_event/uploads_data" method="post" enctype="multipart/form-data" name="UploadForm" id="UploadForm">
	    <table>
	    	<tr>
	    		<td class="label" style="width:150px">Files</td><td><input type="hidden" name="no_event_img" id="no_event_img" /><input id="fileInputBox" multiple="multiple" style="margin-bottom: 5px;" type="file"  name="file[]"/></td>
	    	</tr>
	    	<tr>
	    		<td colspan="2"><center><input type="submit" class="button" id="SubmitButton" value="Save & Upload" onclick="formMasterSubmit()"></center></td>
	    	</tr>
	    	<tr>
	    		<td colspan="2"><div id="progressbox"><div id="progressbar"></div ><div id="statustxt">0%</div ></div></td>
	    	</tr>
	    </table>
		</fieldset>
		<fieldset>
		<legend><font color="red"><b>&nbsp;* Gallery foto..&nbsp;</b></font></legend>
		<table>
	    	<?php
	    		$kode_event = (isset($data)) ? $data['no_event'] : $no_event;
	    		$cek_foto = $this->db->query("select * from pro_event_foto where kode_event = '$kode_event'");

	    		if ($cek_foto->result_array() > 0) {
	    			foreach ($cek_foto->result_array() as $r_event_foto) {
	    				?>	<tr>
	    						<td><img src="<?php echo str_replace("/index.php", "", base_url());?>content/show_imej/event/<?php echo $r_event_foto['nama_file'];?>" width="370px" height="230px"></td>
	    					</tr>
	    				<?php
	    			}
	    		}
	    	?>
	    </table>
		</fieldset>
		</div>
</body>
</html>
